<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
  <title>Title</title>
  <style>
    .test{
      width:500px;
    }
    body{
      margin: 0;
    }
  </style>
</head>
<body>

<div class="test">
  为了在移动端让页面获得更好的显示效果，我们必须让布局视口、视觉视口都尽可能等于理想视口。

  device-width就等于理想视口的宽度，所以设置width=device-width就相当于让布局视口等于理想视口。

  由于initial-scale = 理想视口宽度 / 视觉视口宽度，所以我们设置initial-scale=1;就相当于让视觉视口等于理想视口。

  这时，1个CSS像素就等于1个设备独立像素，而且我们也是基于理想视口来进行布局的，所以呈现出来的页面布局在各种设备上都能大致相似。

  这样做主要是为了让1个css像素等于1个设备像素!! 这样做 解决的问题是 对于拥有同样设备像素 但设备像素比不同的手机 同一份css就能在这些手机上拥有相同的展示效果
  <div style="border:1px solid red;width:375px;"></div>
</div>

<!--
可以发现 需要拖动滚动条了 因为我们给layout-view设置为了理想视口的宽度 1px此时等于1设备像素

又因为iPhone6/7/8 就是 设备像素为375(此时因为1px等于1设备像素,故也等于375px)

而我们这里将div.test设置为了500px

故滚动条会出现
-->
<script>
  console.log('window.devicePixelRatio:',window.devicePixelRatio)
  console.log('布局视口,document.documentElement.clientWidth:',document.documentElement.clientWidth)
  console.log(window.clientHeight);
  console.log('视觉视口,window.innerWidth:',window.innerWidth)
  console.log('理想视口,window.screen.width:',window.screen.width)
</script>
</body>
</html>
